<template>
    <div>
        <div class="menu">
            <div class="title">
                {{info.name}}
            </div>
            <ul class="list">
                <li v-for="item,index in data">
                    <a :href="'#mao'+index" style="color:#333;text-decoration: none;">
                        <span v-if="item.request.method=='POST'" style="color: rgb(245, 166, 35);">{{item.request.method}} </span>
                        <span v-else style="color: rgb(62, 182, 62);padding-left:7px">{{item.request.method}} </span>
                        {{item.name}}
                    </a>
                </li>

            </ul>
        </div>
        <div class="con">
            <div class="title">
                {{info.name}}
            </div>
            <div class="list" v-for="item,index in data">
                <a :name="'mao'+index" style="display:block;height:50px;"></a>
                <h3>
                    <span v-if="item.request.method=='POST'" style="color: rgb(245, 166, 35);">{{item.request.method}}</span>
                    <span v-else style="color: rgb(62, 182, 62);">{{item.request.method}}</span>

                    {{item.name}}</h3>
                <div class="url">{{item.request.url.raw}}</div>
                <div class="headers">
                    <p class="header">HEADERS</p>
                    <div class="type">
                        <p v-for="item1 in item.request.header">
                            <b>{{item1.key}}</b> {{item1.value}}
                        </p>

                    </div>
                </div>
                <div class="body">
                    <p class="header">BODY</p>
                    <dl class="param" v-for="item2 in item.request.body.urlencoded">
                        <dd>{{item2.key}}</dd>
                        <dt>
                            <p>{{item2.value}}</p>
                            <p style="color:grey">{{item2.description}}</p>
                        </dt>
                    </dl>

                </div>
                <div class="response">
                    <p class="header">响应</p>
                    <div class="url" v-if="item.response.length!=0">
                        <textarea id="targetjson" readonly>{{item.response[0].body}}</textarea>
                    </div>
                    <div class="url" v-else>
                        暂无返回值
                    </div>

                </div>
            </div>

        </div>

    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            info: {},
            data: {},
            header: {}
        };
    },
    mounted() {
        var qs = require("qs");
        this.axios({
            method: "get",
            url: "../../static/collection.json"
        })
            .then(response => {
                console.log(response);
                this.info = response.data.info;
                this.data = response.data.item;
                for (var i = 0; i < this.data.length; i++) {
                    this.data[i].response[0].body = JSON.stringify(
                        JSON.parse(this.data[i].response[0].body),"",4
                    );
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.menu {
    position: fixed;
    width: 250px;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.05);
}
.menu .title {
    width: 200px;
    margin-left: 15px;
    background-color: rgb(237, 237, 237);
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    margin-top: 50px;
    padding-left: 10px;
    border-radius: 5px;
}
.menu ul {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 12px;
    list-style: none;
}
.menu ul li {
    height: 30px;
    line-height: 30px;
}
.con {
    margin-left: 250px;
}
.con .title {
    font-size: 40px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 20px;
}
.con .list {
    border-top: 1px solid #eee;
    padding-left: 20px;
    font-size: 12px;
}
.con .list h3 span {
    margin-right: 10px;
}
.con .list .url {
    margin-bottom: 35px;
    margin-top: 10px;
    margin-right: 50px;
    border: 1px solid rgb(230, 230, 230);
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 12px;
    color: rgb(40, 40, 40);
    background-color: rgb(248, 248, 248);
}
.con .list .header {
    border-bottom: 1px solid #eee;
    margin-right: 50px;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.con .list .type p {
    padding-bottom: 10px;
}
.con .list .headers b {
    margin-right: 50px;
}
.con .list .body {
    padding-top: 20px;
}
.con .list dl {
    height: 50px;
    margin-top: 10px;
}
.con .list dl dd {
    float: left;
    width: 20%;
    font-weight: bold;
}
.con .list dl dt {
    float: right;
    width: 80%;
}
.con textarea {
    border: none;
    width: 100%;
    min-height: 200px;
    background-color: rgb(248, 248, 248);
    resize: none;
    outline: none;
}
</style>
